<template>
	<view>
	<uni-card>
	<uni-row>
		
		<uni-col style = "color: black;"> {{devName}}: </uni-col>
		
	</uni-row>
    <uni-row style = "width: 100%; height: 10rpx;"></uni-row>
	<uni-row style = "width: 100%; height: 3rpx; background-color: whitesmoke;"></uni-row>
	<uni-row >
		
		<uni-collapse  accordion v-for="(item,index) in wxCmdFieldDetails" >
			<uni-collapse-item :title="item.name"  > 
			  <uni-row v-for = "(innerItem,innerIndex) in item.wxCmdFieldInnerDetails"  >
				   <uni-row style = "width: 100%; height: 3rpx; background-color: whitesmoke;"></uni-row>
				    <uni-row style = "width: 100%; height: 15rpx;"></uni-row>
				  <uni-row style = "margin-left: 5%;margin-right: 5%;">{{innerItem.fieldName}}:</uni-row>
				  <input  style = "margin-left: 5%;margin-right: 5%; color: grey; font-size: 100%;" :placeholder="innerItem.remark"
				    v-model="innerItem.value"
					></input>
				   <uni-row style = "width: 100%; height: 15rpx;"></uni-row>
			  </uni-row>
			   <uni-row style = "width: 100%; height: 3rpx; background-color: whitesmoke;"></uni-row>
			    <uni-row style = "width: 100%; height: 15rpx;"></uni-row>
				
				<button class="button" type="primary" @click="generateJson(item)">发送</button>
			    
			</uni-collapse-item>
		</uni-collapse>
	</uni-row>	
	</uni-card>	
	
	<uni-popup ref="popup">
		<uni-card>
		  <h2 style ="max-lines: 1;margin-bottom: 30rpx;">{{rstCmdFieldDetailElement.name}}</h2>	
		  <uni-row v-for = "(innerItem,innerIndex) in  rstCmdFieldDetailElement.wxCmdFieldInnerDetails"  >
			  
			    <uni-row style = "width: 100%; height: 15rpx;"></uni-row>
			  <h3 style = "margin-left: 5%;margin-right: 5%;">{{innerItem.fieldName}}:{{innerItem.value}}</h3>
			   <uni-row style = "width: 100%; height: 15rpx;"></uni-row>
			   
			   <i style = "margin-left: 5%;margin-right: 5%;">{{innerItem.remark}}</i>
			   <uni-row style = "width: 100%; height: 3rpx; background-color: whitesmoke;"></uni-row>
		  </uni-row>
		   
		</uni-card>
		
	</uni-popup>
	
   </view>
   
   
</template>

<script>
  import {takeCmdVO,takeCmdResult} from "@/api/iot/cmd";

	
  export default {
    data() {
      return {
	   //后台获取得视图对象	  
       showPopup : true,
	   wxCmdFieldDetails:[],
	   cmdFieldDetailElement:{
		   id : 0,
		   name : "",
		   wxCmdFieldInnerDetails : [],
	   },
	   rstCmdFieldDetailElement:{
	   		   id : 0,
	   		   name : "",
	   		   wxCmdFieldInnerDetails : [],
	   },
	   wxCmdFieldInnerDetailsElement:{
		     fieldName: " ",
		     fieldKey: " ",
             remark: " ",
		     value: null
	   },
	  
	   //param
	   devId: " ",
	   devName: " ",
	   productName: " ",
	   productId: " ",
      }
    },
  
    onLoad(event) {
      this.devId = event.devId;	
	  this.devName = event.devName;
      this.productName = event.productName;
	  this.productId = event.productId;
	
	  
      if (this.productName) {
        uni.setNavigationBarTitle({
          title: this.productName
        });
      }
	   
	  this.initCmdUI()
    },
	mounted() {
		
	},
	
	methods:{
		initCmdUI(){
			takeCmdVO(this.productId).then(res => {
				 this.data = res.data;
				 this.wxCmdFieldDetails = res.data.wxCmdFieldDetails;
				 
				 
				})
		},
		generateJson(item){
			var vo ={};
			var json = {};
			this.$set(vo,"devId",this.devId)
			this.$set(vo,"cmdId",item.id)
			for(var i = 0; i < item.wxCmdFieldInnerDetails.length; i++) {
				var element = item.wxCmdFieldInnerDetails[i];
				this.$set(json,element.fieldKey,element.value)
			} 
			this.$set(vo,"data",json);
			takeCmdResult(vo).then(res => {
				if(res.code != 200) {
			     	alert(res.msg);
				} else {
					//弹出对话框，并展示返回数据
					this.rstCmdFieldDetailElement = res.data;
					this.$refs['popup'].open('center');
				}
			})
		}
		
	}
		
	}
	
  
</script>
